<template>
  <div>
    <label>
      <input type="radio" name="status" v-model="type" value="0" />
      全部({{ todo.list.length }})
    </label>
    <label>
      <input type="radio" name="status" v-model="type" value="1" />
      未完成({{ aaa.length }})
    </label>
    <label>
      <input type="radio" name="status" v-model="type" value="2" />
      已完成({{ bbb.length }})
    </label>
  </div>
</template>

<script setup>

import { ref, computed, watch } from 'vue'

import { useStore } from "../stores/userStore";

// const por = defineProps(['b']);

const todo = useStore()

const type = ref('0')

const aaa = computed(() => {

  return todo.list.filter((item) => item.isFinite === false)
})

const bbb = computed(() => {
  return todo.list.filter((item) => item.isFinite === true)

})

watch(type, (newtype) => {
  todo.setFilterType(newtype)
})
</script>